<template>
  <layout>
    <template #header>
      <view class="head flex flex-a-c">
        <image
          src="../../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.9"
          mode="scaleToFill"
          @click="back"
        />
        <text class="fs-36 bold">任务详情</text>
      </view>
    </template>
    <view class="content">
      <view class="info flex">
        <image class="poster" :src="info.verticpic" />
        <view class="right">
          <text class="title ellipsis-2 fs-32 bold">
            {{ info.vname }}
          </text>
          <view class="eso c-60 fs-28">
            已完结/共{{ info.episodeCount }}集
          </view>
          <view class="eso c-60 fs-28"> {{ info.onlineTime }}上线 </view>
          <view class="income flex flex-a">
            <text class="fs-24 c-60 flex">历史收益</text>
            <text class="value fs-28 bold">{{
              info.totalMaxIncome ? info.totalMaxIncome + "元" : 0
            }}</text>
          </view>
          <view class="btns flex">
            <view class="btn flex flex-a-c">
              <image
                src="../../../assets/images/icons/send.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <text class="fs-20">{{ info.promotionCount || 0 }}</text>
            </view>
            <view class="btn flex flex-a-c">
              <image
                v-if="info.isCollect"
                src="../../../assets/images/icons/star-active.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <image
                v-else
                src="../../../assets/images/icons/star.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <text class="fs-20">{{ info.collectCount || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="types">
        <view class="selection flex">
          <view
            v-if="info.dyPromotionStatus"
            @click="selectType(0)"
            :class="{ active: typeIndex === 0 }"
            class="type flex flex-a-c"
          >
            <image src="../../../assets/images/icons/dy.png"></image>
            <text>抖音</text>
          </view>
          <view
            v-if="info.ksPromotionStatus"
            @click="selectType(1)"
            :class="{ active: typeIndex === 1 }"
            class="type flex flex-a-c"
          >
            <image src="../../../assets/images/icons/kuaishou.png"></image>
            <text>快手</text>
          </view>
          <view
            v-if="info.wxPromotionStatus"
            @click="selectType(2)"
            :class="{ active: typeIndex === 2 }"
            class="type flex flex-a-c"
          >
            <image src="../../../assets/images/icons/wx.png"></image>
            <text>微信</text>
          </view>
        </view>
        <view class="desc">
          <view class="title fs-32 bold">小程序计划</view>
          <view class="flex desc-t">
            <view class="item flex flex-a-c">
              <text>推广计划</text>
              <text class="num">{{ rateInfo.dyMaPromotionRate || 0 }}%</text>
            </view>
            <view class="item flex flex-a-c">
              <text>平台补贴</text>
              <text class="num">{{ rateInfo.dyMaPromotionPlat || 0 }}%</text>
            </view>
          </view>
        </view>
        <view class="desc">
          <view class="title fs-32 bold">星图结算</view>
          <view class="flex desc-t">
            <view class="item flex flex-a-c">
              <text>分成比例</text>
              <text class="num">{{ rateInfo.xtMount }}%</text>
            </view>
          </view>
        </view>
      </view>
      <view class="intro">
        <view class="fs-32 bold">剧情简介</view>
        <text class="fs-28 color-80">{{ info.intro }}</text>
      </view>
      <view class="link" v-if="info.netDiskUrl">
        <view class="fs-32 bold">网盘链接</view>
        <view class="btns flex">
          <a
            class="btn"
            :href="info.netDiskUrl + '?pwd=' + info.netDiskPassword"
            >直接打开</a
          >
          <view
            class="btn"
            @click="copyCode(info.netDiskUrl + '?pwd=' + info.netDiskPassword)"
            >复制链接</view
          >
        </view>
      </view>
    </view>
    <view class="func flex flex-bt">
      <view @click="toPlay" class="flex flex-a-c">
        <image
          src="../../../assets/images/icons/play.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>播放</text>
      </view>
      <view @click="onCollect" class="flex flex-a-c">
        <image
          v-if="info.isCollect"
          src="../../../assets/images/icons/star-active.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <image
          v-else
          src="../../../assets/images/icons/star.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>{{ info.isCollect ? "取消收藏" : "收藏" }}</text>
      </view>
      <!-- TODO:还原 -->
      <!-- <view @click="showPopup = true" class="btn flex flex-a-c">
        <image
          src="../../../assets/images/icons/send-white.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>去投稿</text>
      </view> -->
    </view>
    <u-popup
      round="32rpx"
      class="f-content"
      :show="showPopup"
      @close="showPopup = false"
    >
      <view class="f-content">
        <uv-qrcode
          ref="qrcode"
          value="https://h5.uvui.cn"
          :options="options"
        ></uv-qrcode>
        <text @click="onSaveQrcode">保存</text>
      </view>
    </u-popup>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import { copyText, randomString } from "../../../assets/utils/index";
import { getRate } from "../../../api/extend/index";
import {
  getDramaDetail,
  collect,
  unCollect,
  viewDrama,
} from "../../../api/drama";

export default {
  components: { layout },
  data() {
    return {
      showPopup: false,
      typeIndex: 0,
      id: "",
      info: {},
      rateInfo: {},
      options: {
        data: "https://www.uvui.cn",
        size: 300,
        useDynamicSize: false,
        errorCorrectLevel: "Q",
        margin: 2,
        areaColor: "#ffffff",
        // backgroundColor: "#3c9cff",
        // 指定二维码前景，一般可在中间放logo
        // foregroundImageSrc: "https://www.uvui.cn/common/logo.png",
      },
    };
  },
  onLoad(options) {
    console.log(options);
    this.id = options.id;
    this.getDetail();
    this.onViewDrama();
  },
  methods: {
    onViewDrama() {
      viewDrama({ vid: this.id });
    },
    async shareDouyin() {
      let nonce_str = randomString(6);
      let timestamp = new Date().getTime();
      let signature = "";
      let micro_app_info = JSON.stringify({
        appId: "",
        appTitle: "",
        appUrl: "/pages/",
      });
      let video_path = "www.baidu.com";
      plus.runtime.openURL(
        `snssdk1128://openplatform/share?share_type=h5&client_key=aw3xsv71iwo2ekf1&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&micro_app_info=${micro_app_info}&video_path=${video_path}`,
        function (error) {
          console.error("打开抖音失败: " + error);
        }
      );
    },

    back() {
      uni.navigateBack();
    },
    selectType(type) {
      this.typeIndex = type;
    },
    onCollect() {
      if (this.info.isCollect) {
        return unCollect({ vid: this.id }).then((res) => {
          this.info.isCollect = false;
          this.info.collectCount--;
          this.$u.toast("已取消");
        });
      }
      collect({ vid: this.id }).then((res) => {
        console.log(res);
        this.info.isCollect = true;
        this.info.collectCount
          ? this.info.collectCount++
          : (this.info.collectCount = 1);
        this.$u.toast("收藏成功");
      });
    },
    toPlay() {
      console.log(this.id);
      let id = 32;
      let schema = `snssdk1128://microapp?app_id=tt9931ef8c060ebe9701&start_page=pages/content/content?vid=${id}`;
      plus.runtime.openURL(schema, function (error) {
        this.$u.toast("打开抖音失败");
      });
    },
    onSaveQrcode() {
      this.$refs.qrcode.save({
        success: (res) => {
          console.log(res);
          this.$u.toast("成功保存到相册");
        },
      });
    },

    getDetail() {
      getDramaDetail({ vid: this.id }).then((res) => {
        this.info = res.data;
        // this.info.netDiskUrl = 'https://pan.baidu.com/s/1bznP5xiO8uXOcQJD_WnvPQ'
        // this.info.netDiskPassword = 'men7'
      });
      getRate().then((res) => {
        console.log(res);
        this.rateInfo = res.data;
      });
    },
    copyCode(text) {
      copyText(text);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common");
._item {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-top: 24rpx;
}
.head {
  position: relative;
  width: 100%;
  padding-bottom: 16rpx;
  .back {
    position: absolute;
    left: 32rpx;
  }
}
.content {
  padding: 0 32rpx 180rpx 32rpx;
  .info {
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .poster {
      flex-shrink: 0;
      width: 240rpx;
      height: 320rpx;
      border-radius: 8rpx;
    }
    .right {
      flex: 1;
      padding-left: 24rpx;
      .title {
        width: 100%;
      }
      .eso {
        margin-top: 8rpx;
      }
      .income {
        margin-top: 20rpx;
        .value {
          color: #f65900;
          padding-left: 16rpx;
        }
      }
      .btns {
        padding-right: 20rpx;
        margin-top: 16rpx;
        .btn {
          flex: 1;
          background: #fef3e6;
          color: #f28403;
          padding: 8rpx 0;
          border-radius: 8rpx;
          &:nth-child(1) {
            margin-right: 24rpx;
            color: #436af3;
            background: #edf1fe;
          }
        }
      }
    }
  }
  .types {
    ._item();
    .selection {
      height: 90rpx;
      border-radius: 16rpx;
      overflow: hidden;
      background: rgba(67, 106, 243, 0.1);
      text {
        font-size: 32rpx;
        font-weight: bold;
      }
      .type {
        flex: 1;
        height: 100%;
        &.active {
          background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
          border-radius: 16rpx;
          text {
            color: #fff;
          }
        }
      }
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
    }
    .desc {
      margin-top: 24rpx;
      .title {
        margin-bottom: 24rpx;
      }
      .desc-t {
        .item {
          width: 262rpx;
          height: 64rpx;
          background: #f5f9ff;
          border-radius: 8rpx;
          margin-right: 32rpx;
          font-size: 24rpx;
          color: rgba(7, 11, 28, 0.9);
          .num {
            color: #436af3;
            font-size: 28rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }
  .intro {
    ._item();
  }
  .link {
    ._item();
    .btn {
      width: 176rpx;
      height: 64rpx;
      line-height: 62rpx;
      background: #f5f9ff;
      color: #436af3;
      border-radius: 8rpx;
      text-align: center;
      font-size: 28rpx;
      margin-right: 32rpx;
      margin-top: 24rpx;
      &:nth-child(2) {
        background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
        color: #fff;
      }
    }
  }
  .func {
    position: fixed;
    bottom: 0;
    padding: 32rpx 48rpx;
    background: #fff;
    width: 100%;
    left: 0;
    border-top: 2rpx solid #e9e9ea;
    text {
      font-size: 32rpx;
      color: rgba(7, 11, 28, 0.8);
      // margin-left: 18rpx;
    }
    .btn {
      width: 288rpx;
      height: 88rpx;
      border-radius: 16rpx;
      color: #fff;
      background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
      text {
        color: #ffffff;
      }
    }
  }
}
</style>
